<template>
  <van-cell
    class="article-item"
    :title="article.title"
    :to="{
      //根据名称跳转路由 根据params获取动态参数
      name: 'article',
      params: { articleId: article.art_id }
    }"
  >
    <template #label>
      <van-grid :column-num="article.cover.type">
        <van-grid-item
          v-for="(item, index) in article.cover.images"
          :key="index"
        >
          <van-image :src="item" />
        </van-grid-item>
      </van-grid>
      <div class="label">
        <span>{{ article.aut_name }}</span>
        <span>评论({{ article.comm_count }})</span>
        <span>{{ article.pubdate | relativeTime }}</span>
      </div>
    </template>
  </van-cell>
</template>

<script>
export default {
  name: 'ArticleItem',
  components: {},
  props: {
    article: {
      type: Object,
      required: true
    }
  },
  data () {
    return {}
  },
  methods: {}
}
</script>

<style scoped lang="less">
.article-item {
  .label span {
    font-size: 22px;
    color: #b4b4b4;
    margin-right: 25px;
  }
}
</style>
